<template>
    <div class="rl31dg-2 iKCdHH">
        <div class="rl31dg-3 fCytZy">
            <div class="sc-1d9uflq-1 kjzgGw">
                <div class="sc-1vhl1ud-0 iAHSCb">
                    <h1 class="jc6i63-0 sc-1d9uflq-2 cmoiYo">选择应用仓库</h1>
                    <p class="djs2am-0 sc-1d9uflq-3 hVuhLe">自动创建应用数据和生成持续集成脚本</p>
                </div>

                <div class="sc-494z8g-0 sc-14i1hry-0 kEwNER">
                    <span style="font-size:13px;">
                        项目连接Gitlab可以更好的帮你进行项目管理，实时跟进项目开发进度和情况
                    </span>
                </div>

                <div class="zfc3g7-0 cFMoVy">

                    <div class="ksa0ua-0 elwCEo" v-for="item in svnList" :key="item.id">
                        <div class="sc-1ngwmbv-3 cZlSjT git-host-item dash-size-regular">
                            <div class="sc-icons">
                                <i :class="item.icon"></i>
                            </div>
                            <div class="sc-1ngwmbv-4 gWayKh">
                                <div class="sc-1ngwmbv-1 jPmxjq title-text">
                                    {{ item.name }}
                                </div>
                                <div class="sc-1ngwmbv-2 hhsakP sub-text">
                                    <div>
                                       未连接
                                    </div>
                                </div>
                            </div>
                            <div class="sc-1ngwmbv-5 ghKyco">
                                <button @click="connectGit(item)" class="aap711-0 LrZpX  dash-color-primary dash-size-regular">
                                    <span><i class="fas fa-link"></i> 连接</span>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <el-dialog
            title="输入gitlab的Person Token和地址"
            :visible.sync="gitlabDialogVisible"
            width="600px">

            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item label="Gitlab服务地址" prop="gltlabHost" :label-width="formLabelWidth">
                  <el-input v-model="form.gltlabHost" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="PersonToken" prop="personToken" :label-width="formLabelWidth">
                  <el-input v-model="form.personToken" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-link href="https://gitlab.your-domain.com" style="margin-left:20px" type="primary" target="_blank">PersonToken获取方式</el-link>

            <span slot="footer" class="dialog-footer">
                <el-button @click="gitlabDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="generatorGit('form')">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>

import { getSvnList } from "@/views/com/alinesno/cloud/initializr/initiallizrSeed/api";

export default {
  data(){
    return {
      gitlabDialogVisible: false ,
      formLabelWidth: '120px' ,
      svnList:[],
      form: {
        gltlabHost: '',
        personToken: ''
      },
      rules: {
        gltlabHost: [
        { required: true, message: '请输入Gitlab服务地址', trigger: 'blur' }
        ],
        personToken: [
        { required: true, message: '请输入PersonToken', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getSvn();
  },
  methods: {
    getSvn(){
      getSvnList().then(response =>{
        this.svnList = response.data ;
      }) ;
    },
    connectGit(item) {
      console.log('connectGit = ' + item);
      if(item.status == 0){
        this.$message({
          message: '功能还在测试中...',
          type: 'warning'
        });
        return ;
      }else{
        this.gitlabDialogVisible = true ;
      }
    } ,
    generatorGit(formName){
      var projectId = this.$route.params.pId ;

      this.$refs[formName].validate((valid) => {
        if (valid) {

          const loading = this.$loading({
            lock: true,
            text: '工程正在生成，预计1分钟，请耐心等待...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });

          this.form.projectId = projectId ;
          uploadGitProject(this.form).then(response => {
            loading.close();
            console.log('response = ' + response);

            var toPath = '/build/overview/' + projectId ;
            this.$router.push({path: toPath});
          } , error => {
            loading.close();
          }) ;

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import '@/asserts/css/build/connectGit.scss';

.dingtalk-icons{
  width: 20px;
  margin-right: 10px;
}

.sc-icons{
  height: 100%;
  font-size: 40px;
  margin-right: 10px;
  color: #005bd4;
}
</style>


